<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>京东首页右侧固定层</title>
		<style>
			ul{
				position: fixed;
				right:0px;
				top:200px;
			}
			li{
				margin-top: 2px;
				list-style: none;
				clear: both;
				content: "";
				display: table;
				position: relative;
			}
			span{
				display: inline-block;
				width: 30px;
				height:30px;
				float: left;
				border-radius:5px 0px 0px 5px ;
				position: relative;
				z-index: 1;
			}
			a{
				display: block;
				border-radius:5px 0px 0px 5px ;
				background: red;
				color: white;
				width:70px;
				padding-left: 10px;
				/*margin-right: -30px;*/
				float: right;
				height: 30px;
				line-height: 30px;
				position: absolute;
				left:30px;
				top:0px
				z-index:0;
				transition: all .3s;
			}
			
			li:first-of-type span{
				background:#666 url(images/toolbars.png) -2px -17px;
			}
			li:nth-of-type(2) span{
				background:#666 url(images/toolbars.png) -2px -57px;
			}
			li:nth-of-type(3) span{
				background:#666 url(images/toolbars.png) -2px -107px;
			}
			li:nth-of-type(4) span{
				background:#666 url(images/toolbars.png) -2px -157px;
			}
			li:nth-of-type(5) span{
				background:#666 url(images/toolbars.png) -2px -204px;
			}
			li:nth-of-type(6) span{
				background:#666 url(images/toolbars.png) -2px -267px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><span></span><a>京东会员</a></li>
			<li><span></span><a>购物车</a></li>
			<li><span></span><a>我的关注</a></li>
			<li><span></span><a>我的足迹</a></li>
			<li><span></span><a>我的消息</a></li>
			<li><span></span><a>咨询JIMI</a></li>
		</ul>
	</body>
	<script src="jquery-3.2.1.js"></script>
	<script>
		$(start);
		function start(){
			$("li").mouseover(function(){
				$(this).find("a").css("left","-80px");
				$(this).find("span").css({"border-radius":"0px 0px 0px 0px","background-color":"red"})
			});
			$("li").mouseout(function(){
				$(this).find("a").css("left","30px");
				$(this).find("span").css({"border-radius":"5px 0px 0px 5px","background-color":"#666"})
			})
		}
	</script>
</html>
